<template>
  <div class="Loginregister">
    <div class="login-container">
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        ref="ruleForm2"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-page"
      >
        <h3 class="title">用户注册</h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="ruleForm2.username"
            auto-complete="off"
            placeholder="用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm2.password" placeholder="密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="confirmpassword">
          <el-input
            type="confirmpassword"
            v-model="ruleForm2.confirmpassword"
            placeholder=" 确认密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="button-item">
          <el-button type="info" plain>
            <router-link to="/login/login">👈去登录</router-link>
          </el-button>
          <el-button plain>
            <router-link to="/login/register">去注册👉</router-link>
          </el-button>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { loginRgister } from "../../ajax/index";
export default {
  data() {
    var validatePasscon = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.confirmpassword !== "") {
          this.$refs.ruleForm2.validateField("confirmpassword");
        }
        callback();
      }
    };
    return {
      logining: false,
      ruleForm2: {
        username: "",
        password: "",
        confirmpassword: ""
      },
      rules2: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        confirmpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePasscon, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.ruleForm2.validate((valid, err) => {
        if (valid) {
          this.logining = true;
          loginRgister(this.ruleForm2).then(res => {
            if (res.code) {
              this.logining = false;
              this.$message("注册成功");
              this.saveUserNameAction({
                username: res.data[0].username,
                radio: res.radio
              });
              this.$router.push({ path: "/home" });
            } else {
              this.logining = false;
              this.$message({
                message: res.code.data,
                type: "error"
              });
            }
          });
        } else {
          this.$message({
            message: "请认真填写信息",
            type: "error"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.Loginregister {
  .login-container {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
  }
  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 20px 35px 15px;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    margin-left: 10px;
    text-align: left;
    color: #ccc;
  }
  .title {
    text-align: center;
    margin-bottom: 10px;
    color: #ccc;
    font-size: 30px;
  }
  .el-button--info.is-plain {
    background-color: rgba(255, 255, 255, 0.3);
    a {
      color: #fff;
    }
  }
  .el-button + .el-button {
    border: 1px solid #ccc;
    margin-left: 100px;
    a {
      color: #cccccc;
    }
  }
  .button-item {
    display: flex;
    justify-content: space-around;
  }
}
</style>